<link rel="stylesheet" type="text/css" href="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.css" />
<link rel="stylesheet" href="ccay/example/demo.css"	type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<!--[if lte IE 9]>
<script language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/excanvas.min.js"  charset="utf-8"></script>
<![endif]-->
<script type="text/javascript"	src="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.js" 	charset="utf-8"></script>
<script class="include" language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.jqplot.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/chart/jqplot/lineDemo.js" />

<div id="barDemo">
	<div title="API">
	  <div>
		<samp><h2>options.skin.seriesDefaults设置</h2></samp> 
		<div style='padding-left:30px'>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">			
					<ul>
						<li class="ccay-form-row">
							<samp><h3>初始化属性</h3></samp> 
					    	<span class="ccay-form-input">
					    		<h3>描述</h3> 
					    	</span>
						</li>
						
						<li class="ccay-form-row">
							<samp>show: boolean</samp> 
					    	<span class="ccay-form-input">设置是否渲染整个图表区域（即显示图表中内容）</span>
						</li>
						<li class="ccay-form-row">
							<samp>label: string</samp> 
					    	<span class="ccay-form-input">用于显示在分类名称框中的分类名称</span>
						</li>
						<li class="ccay-form-row">
							<samp>color: string</samp> 
					    	<span class="ccay-form-input">分类在图标中表示（折现，柱状图等）的颜色</span>
						</li>
						<li class="ccay-form-row">
							<samp>lineWidth: number </samp> 
					    	<span class="ccay-form-input">分类图（特别是折线图）宽度 </span>
						</li>
						<li class="ccay-form-row">
							<samp> showLine: boolean</samp> 
					    	<span class="ccay-form-input">是否显示图表中的折线（折线图中的折线）</span>
						</li>
						<li class="ccay-form-row">
							<samp>showMarker: boolean</samp> 
					    	<span class="ccay-form-input">是否强调显示图中的数据节点</span>
						</li>
						<li class="ccay-form-row">
							<samp>fill: boolean</samp> 
					    	<span class="ccay-form-input">是否填充图表中折线下面的区域（填充颜色同折线颜色）以及legend设置的分类名称框中分类的颜色，此处注意的是如果fill为true，那么showLine必须为true，否则不会显示效果</span>
						</li>
						<li class="ccay-form-row">
							<samp>fillAndStroke: boolean</samp> 
					    	<span class="ccay-form-input">在fill为true的状态下，在填充区域最上面显示一条线（如果是折线图则显示该折线）</span>
						</li>
						<li class="ccay-form-row">
							<samp>fillColor: color</samp> 
					    	<span class="ccay-form-input">设置填充区域的颜色 </span>
						</li>
						<li class="ccay-form-row">
							<samp> fillAlpha</samp> 
					    	<span class="ccay-form-input">设置填充区域的透明度</span>
						</li>
						<li class="ccay-form-row">
							<samp>renderer</samp> 
					    	<span class="ccay-form-input">利用渲染器渲染现有图表，从而转换成所需图表    </span>
						</li>
						<li class="ccay-form-row">
							<samp>series: []</samp> 
					    	<span class="ccay-form-input">如果有多个分类需要显示，这在此处设置各个分类的相关配置属性,配置参数设置同seriesDefaults <br>eg.设置各个分类在分类名称框中的分类名称   <br>[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}] </span>
						</li>
					</div>
					</form>
			</div>
		</div>
		<!--  -->
		<br>
		<a onclick="Ccay.Common.toggle(this,'#serviceCodeArea')">需要引入的JS>></a>
			<div id="serviceCodeArea" class="codeArea" style="display:none;">
<pre>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.js" 	charset="utf-8">&lt/script>
&ltscript class="include" language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.pieRenderer.min.js">&lt/script>
&ltscript class="include" language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.donutRenderer.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.cursor.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.highlighter.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.jqplot.js" charset="utf-8">&lt/script>
</pre>
</div>		
	</div>
	
	<div title="折线图" tabid="chart">
		<h4><span>折线图</span></h4>
		<div id=chart style="width:500px"></div>
		<span class="ccay-button"   onclick="$('#chart').chartAsImage()">
			<a class="ccay-icon pic"></a>
			<label>保存为图片</label>
		</span>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html1'>
&lt;h4>&lt;span>折线图&lt;/span>&lt;/h4>
&lt;div id=chart11>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
				$("#chart11").chart2({
			ajax:{
				url: 'ccay/example/ui/chart/datas2.json'
			},
			convertArrayType: 2,
		    convertFields:['profit','total'],
    	    skin: {
			    axesDefaults: {
			      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
			    },
			    seriesDefaults: {
			    	 showMarker:false,
			         pointLabels: { show:true } 
			    },
			    series:[{label:'月度利润'},
			            {label:'月度销售额'}
			           ],
			    highlighter : Ccay.UI.Chart.defaultHighlighter,
			    legend: { show:true }
    	    }
		});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js1').html(),$('#html1').html())">试一试</a>
		</div>
	</div>
	
	<div title="折线图" tabid="chart1">
		<h4><span>折线图</span></h4>
		<div id=chart1 style="width:500px"></div>
		
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html2'>
&lt;h4>&lt;span>折线图&lt;/span>&lt;/h4>
&lt;div id=chart22>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js2'>
				$("#chart22").chart2({
					ajax:{
						url:'ccay/example/ui/chart/datas2.json'
					},
					fnConvert:function(item){
						//debugger;
						var result = [];
						var temp1 = [];
						var temp2 = [];
						var temp3 = [];
						for (var idx = 0; idx < item.length; idx++) {
							temp1.push(item[idx]['profit']);
							temp2.push(item[idx]['total']);
							temp3.push(temp2[idx]-temp1[idx]);
						}
						result.push(temp1);
						result.push(temp2);
						result.push(temp3);
						
						//alert(result);
						return result;
			        },
					skin: {
						axesDefaults: {
						      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
						    },
						    seriesDefaults: {
						    	 showMarker:false,
						         pointLabels: { show:true } 
						    },
						    series:[{label:'月度利润'},
						            {label:'月度销售额'},
						            {label:'月度支出'}
						           ],
						    highlighter : Ccay.UI.Chart.defaultHighlighter,
						    legend: { show:true }
					}
					
				});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js2').html(),$('#html2').html())">试一试</a>
		</div>
	</div>
	
	<div title="曲线图" tabid="chart2">
		<h4><span>曲线图</span></h4>
		<div id="chart2" style="width:500px"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id="html3">
		&lt;h4>&lt;span>曲线图&lt;/span>&lt;/h4>
		&lt;div id=chart33>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js3'>
		var data = []; 
		for (var i=0; i<12.4; i+=0.1){ 
			data.push([i, Math.cos(i)]); 
		}
		$("#chart33").chart2({  
		 	data: [data],
		    seriesDefaults: {
				showMarker:false,
				pointLabels: { show:true } 
			},
		    skin:{
		    	axesDefaults: {
					labelRenderer: $.jqplot.CanvasAxisLabelRenderer
				},
		        series:[
                	{label:'月度利润'}
                ],
		        highlighter : Ccay.UI.Chart.defaultHighlighter,
		        legend: { show:true }
		   }
		});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js3').html(),$('#html3').html())">试一试</a>
		</div>
	</div>
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;width:700px" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
  	
	<div title="FAQ">
	  	<form class="init ccay-form">
	    <div class="ccay-form-body">
	    	<ul></ul>
		</div>     
		<div class="ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	           <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	            <samp class="i18n" i18nKey=""></samp>                          
	            <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
		</div>
	  	</form> 
	</div>
</div>

